<template>
  <div class="viewport">
    <PanelSlider 
      ref="sliderRef"
      v-model:currentIndex="currentIndex"
      @animation-complete="onAnimationComplete"
    >
      <Panel 
        v-for="(panel, i) in allPanels" 
        :key="i" 
        :id="panel.id"
      >
        <HomePanel 
          v-if="panel.id === 'home'" 
          title="Sangyie" 
          description="工业五金制造商" 
        />
        
        <AboutPanel 
          v-else-if="panel.id === 'about'" 
          subtitle="一些事实" 
          title="关于公司" 
          :facts="facts"
          :showNextButton="i < allPanels.length - 1"
          @next="goTo(i + 1)"
        />
        
        <CatalogPanel 
          v-else-if="panel.id === 'catalog'" 
          subtitle="产品目录"
          title="目录"
          :showNextButton="i < allPanels.length - 1"
          @next="goTo(i + 1)"
        />
        
        <ServicesPanel 
          v-else-if="panel.id === 'services'" 
          subtitle="我们提供"
          title="服务"
          :showNextButton="i < allPanels.length - 1"
          @next="goTo(i + 1)"
        />

        <PartnersPanel
          v-else-if="panel.id === 'partners'" 
          subtitle="我们与谁合作"
          title="我们的合作伙伴"
          :showNextButton="i < allPanels.length - 1"
          @next="goTo(i + 1)"
        />
        
        <ClientsPanel
          v-else-if="panel.id === 'clients'" 
          subtitle="信任我们的公司"
          title="客户"
          :showNextButton="i < allPanels.length - 1"
          @next="goTo(i + 1)"
        />
        
        <ContactPanel
          v-else-if="panel.id === 'contact'" 
          subtitle="联系我们"
          title="联系方式"
        />
        
        <GenericPanel 
          v-else 
          :title="panel.text"
        >
          <p>{{ panel.text }}的内容将在这里显示</p>
        </GenericPanel>
      </Panel>
    </PanelSlider>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { useRoute } from 'vue-router';
import gsap from 'gsap';
import Observer from 'gsap/Observer';
import type { PanelInfo, Fact } from './PanelTypes';
import PanelSlider from './PanelSlider.vue';
import Panel from './Panel.vue';
import HomePanel from './HomePanel.vue';
import AboutPanel from './AboutPanel.vue';
import CatalogPanel from './CatalogPanel.vue';
import ServicesPanel from './ServicesPanel.vue';
import PartnersPanel from './PartnersPanel.vue';
import ClientsPanel from './ClientsPanel.vue';
import ContactPanel from './ContactPanel.vue';
import GenericPanel from './GenericPanel.vue';

gsap.registerPlugin(Observer);

const route = useRoute();

// 首页panel
const homePanel: PanelInfo = { id: "home", text: "Sangyie" };

// 内容panels
const panels: PanelInfo[] = [
  { id: "about", text: "关于公司" },
  { id: "catalog", text: "目录" },
  { id: "services", text: "服务" },
  { id: "partners", text: "合作伙伴" },
  { id: "clients", text: "客户" },
  { id: "contact", text: "联系方式" }
];

// 公司事实数据
const facts: Fact[] = [
  { id: "01", icon: "about1", text: "10年食品行业设备供应经验" },
  { id: "02", icon: "about2", text: "我们的合作伙伴是全球领先的公司" },
  { id: "03", icon: "about3", text: "阿法拉伐在白俄罗斯的唯一总代理商合作伙伴" },
  { id: "04", icon: "about4", text: "内部工程师团队" },
  { id: "05", icon: "about5", text: "新的服务模式" },
  { id: "06", icon: "Icon-6", text: "常设备件仓库" }
];

// 合并所有panels，首页放在第一位
const allPanels = [homePanel, ...panels];
const currentIndex = ref(0);
const isAnimating = ref(false);
const LOCK_MS = 400;
interface PanelSliderInstance {
  slideTo: (index: number) => void;
}

const sliderRef = ref<PanelSliderInstance | null>(null);

// 根据id查找对应的panel索引
function findPanelIndexById(id: string): number {
  return allPanels.findIndex(panel => panel.id === id);
}

// 根据索引获取panel的id
function getPanelIdByIndex(index: number): string | null {
  if (index >= 0 && index < allPanels.length) {
    return allPanels[index].id;
  }
  return null;
}

// 创建一个自定义事件，用于通知导航栏当前活动的section
function notifyActiveSectionChange(sectionId: string): void {
  // 更新全局currentSectionId变量
  window.currentSectionId = sectionId;

  // 创建并分发自定义事件
  const event = new CustomEvent('section-change', {
    detail: { sectionId }
  });
  window.dispatchEvent(event);
}

// 滚动到指定索引的panel
function goTo(index: number): void {
  if (isAnimating.value) return;
  
  const targetIndex = Math.max(0, Math.min(index, allPanels.length - 1));
  if (targetIndex === currentIndex.value) return;
  
  isAnimating.value = true;
  sliderRef.value?.slideTo(targetIndex);
}

// 动画完成后的回调
function onAnimationComplete() {
  const panelId = getPanelIdByIndex(currentIndex.value);
  if (panelId) {
    history.pushState(null, '', `#${panelId}`);
    notifyActiveSectionChange(panelId);
  }
  
  setTimeout(() => {
    isAnimating.value = false;
  }, LOCK_MS);
}

// 根据锚点ID滚动到对应的panel
function goToById(id: string): void {
  const index = findPanelIndexById(id);
  if (index !== -1) {
    goTo(index);
  }
}

// 处理URL哈希变化
function handleHashChange() {
  const hash = window.location.hash.substring(1);
  if (hash) {
    goToById(hash);
  }
}

// 暴露方法给全局，以便NavigationBar可以调用
function exposeScrollMethod(): void {
  window.scrollToSection = (sectionId: string): boolean => {
    goToById(sectionId);
    return false; // 阻止默认行为
  };
}

// 监听当前索引变化
watch(currentIndex, (newIndex) => {
  const panelId = getPanelIdByIndex(newIndex);
  if (panelId) {
    notifyActiveSectionChange(panelId);
  }
});

// 保存 Observer 实例
let observerInstance: any = null;

// 创建 Observer 的辅助函数
const createObserver = () => {
  observerInstance = Observer.create({
    target: window,
    type: "wheel,touch",
    tolerance: 10,
    preventDefault: true,
    // @ts-ignore - GSAP Observer类型定义不完整
    passive: false,
    onDown: () => goTo(currentIndex.value + 1),
    onUp: () => goTo(currentIndex.value - 1),
    onRight: () => goTo(currentIndex.value + 1),
    onLeft: () => goTo(currentIndex.value - 1),
  });
  (window as any).panelObserver = observerInstance;
};

// 监听路由变化，当回到主页时重新创建 Observer
watch(() => route.path, (newPath, oldPath) => {
  // 如果从详情页回到主页，重新创建 Observer
  if (newPath === '/' && oldPath && oldPath.startsWith('/catalog/')) {
    // 如果 Observer 不存在或已被 kill，重新创建
    if (!observerInstance || !(window as any).panelObserver) {
      createObserver();
    }
  }
});

onMounted(() => {
  // 初始化时通知导航栏当前活动的section
  const initialPanelId = getPanelIdByIndex(0);
  if (initialPanelId) {
    window.currentSectionId = initialPanelId;
    notifyActiveSectionChange(initialPanelId);
  }

  // 如果 Observer 已经被 kill，先清理
  if ((window as any).panelObserver) {
    try {
      (window as any).panelObserver.kill?.();
    } catch (e) {
      // 忽略错误
    }
    (window as any).panelObserver = null;
  }

  // 监听滚轮/触摸（移除 pointer 以避免鼠标拖动触发翻页）
  createObserver();

  // 添加哈希变化事件监听
  window.addEventListener('hashchange', handleHashChange);

  // 暴露滚动方法给全局
  exposeScrollMethod();

  // 如果URL中包含哈希值，则滚动到对应位置
  if (window.location.hash) {
    const hash = window.location.hash.substring(1);
    setTimeout(() => goToById(hash), 300);
  }
});

onBeforeUnmount(() => {
  // 移除事件监听
  window.removeEventListener('hashchange', handleHashChange);

  // 清理 Observer 实例
  if (observerInstance) {
    observerInstance.kill?.();
    observerInstance = null;
  }

  // 移除全局方法
  if (window.scrollToSection) {
    delete window.scrollToSection;
  }

  // 清理全局currentSectionId变量
  if (window.hasOwnProperty('currentSectionId')) {
    delete window.currentSectionId;
  }

  // 清理全局 Observer 实例
  if ((window as any).panelObserver) {
    delete (window as any).panelObserver;
  }
});

// 暴露方法给父组件
defineExpose({
  goTo,
  goToById
});
</script>

<style scoped>
.viewport {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: radial-gradient(at 70% center,
      rgba(27, 33, 45, 0.7) 0px,
      rgba(27, 33, 45, 0.9) 30%,
      rgb(27, 33, 45) 50%,
      rgb(27, 33, 45) 100%);
}
</style>